<template>
	<view class="container">
		<uni-card>
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item name="username">
					<uni-easyinput prefixIcon="person" type="text" v-model="formData.username" placeholder="用户名" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput prefixIcon="locked" type="password" v-model="formData.password" placeholder="密码" />
				</uni-forms-item>
				<uni-forms-item name="rePassword">
					<uni-easyinput prefixIcon="locked" type="password" v-model="formData.rePassword"
						placeholder="确认密码" />
				</uni-forms-item>
				<uni-forms-item name="email">
					<view class="uni-flex">
						<view style="-webkit-flex: 1;flex: 1;">
							<uni-easyinput prefixIcon="email" type="text" v-model="formData.email" placeholder="邮箱" />
						</view>
<!-- 						<view style="width: 90px;"> <button style="height: 35px;line-height: 40px;"
								type="warn">验证码</button></view> -->
					</view>
				</uni-forms-item>
<!-- 				<uni-forms-item name="code">
					<uni-easyinput prefixIcon="pyq" type="text" v-model="formData.code" placeholder="验证码" />
				</uni-forms-item> -->
			</uni-forms>
			<button type="primary" @click="clickRegister">注册</button>
			<navigator url="../userLogin/userLogin" open-type="redirect">
				<view class="text">已有账号？立即登录</view>
			</navigator>

		</uni-card>
	</view>
</template>

<script lang="ts" setup>
	import api from '../../../../api/api'
	import {
		ref
	} from 'vue'
	const form = ref()
	const formData = ref({
		username: '',
		password: '',
		rePassword: '',
		email: '',
		code: '',
	})
	const rules = ref({
		username: {
			rules: [{
				required: true,
				errorMessage: '请输入用户名'
			}]
		},
		password: {
			rules: [{
				required: true,
				errorMessage: '请输入密码'
			}, {
				minLength: 6,
				errorMessage: '密码至少为六位'
			}, {
				validateFunction: function(rule, value, data, callback) {
					if (data.rePassword != '') {
						if (value != data.rePassword) {
							callback('密码不一致')
							return false;
						} else {
							return true
						}
					} else {
						return true
					}
				}
			}]
		},
		rePassword: {
			rules: [{
				required: true,
				errorMessage: '请确认密码'
			}, {
				minLength: 6,
				errorMessage: '密码至少为六位'
			}, {
				validateFunction: function(rule, value, data, callback) {
					if (value != data.password) {
						callback('两次密码不一致')
						return false
					}
					return true

					// console.log(rule, value, data)
				}
			}]
		},
		email: {
			rules: [{
				required: true,
				errorMessage: '请输入邮箱'
			}, {
				format: 'email',
				errorMessage: '请输入正确的邮箱地址',
			}]
		},
		code: {
			rules: [{
				required: true,
				errorMessage: '请输入验证码',
			}, {
				minLength: 6,
				maxLength:6,
				errorMessage: '验证码为六位数'
			}]
		}
	})
	const clickRegister = () => {
		form.value.validate((valid) => {
			if (!valid) {
				uni.showLoading({
								title:'正在注册，请稍后'
				})
				api.user.register({
					username:formData.value.username,
					password:formData.value.password,
					email:formData.value.email
				}).then(res=>{
					if(res.data.code==0){
						uni.showToast({
							title:'注册成功'
						})
					}
					uni.hideLoading()
				})
			} 
		})
	}
</script>

<style scoped>
	.container {
		margin: 20% auto;
	}

	.text {
		margin-top: 10px;
		text-align: center;
		color: #3399ff;
	}
</style>
